<script setup lang="ts">
import { apiFansist, addFollow, delFollow } from '@/apis/fans';
import { toast } from '@/utils/tools';

const emit = defineEmits(["childFansList", "childFollowList"])

const props = defineProps(['type', 'lists'])


const attentionClick = (id: any, index: any, state: any) => {
  if (state == 0) {
    if (props.type == 'fans') {
      getAddFollow(id).then(() => {
        if (props.type == 'fans') {
          emit("childFansList")
        } else {
          emit("childFollowList")
        }
      })
    } else {
      getDelFollow(id).then(() => {
        if (props.type == 'fans') {
          emit("childFansList")
        } else {
          emit("childFollowList")
        }
      })
    }

  } else if (state == 1) {
    if (props.type == 'fans') {
      getDelFollow(id).then(() => {
        if (props.type == 'fans') {
          emit("childFansList")
        } else {
          emit("childFollowList")
        }
      })
    } else {
      // getAddFollow(id).then(() => {
      //   if (props.type == 'fans') {
      //     emit("childFansList")
      //   } else {
      //     emit("childFollowList")
      //   }
      // })
      getDelFollow(id).then(() => {
        if (props.type == 'fans') {
          emit("childFansList")
        } else {
          emit("childFollowList")
        }
      })
    }

  }
}

// 增加关注
const getAddFollow = async (e: any) => {
  let res = await addFollow({ appFollowId: e });
  toast(res.msg);
}

// 取消关注
const getDelFollow = async (e: any) => {
  let res = await delFollow({ appFollowId: e });
  toast(res.msg);
}
</script>

<template>
  <view>
    <view class="card" v-for="(item, index) in lists">
      <view class="avatar">
        <image :src="item.headSculpture" />
      </view>
      <view class="info">
        <view class="info-top">
          <view class="name">用户昵称：{{ item.userName }}
          </view>
          <view v-if="type == 'fans'">
            <button class="btn" v-if="item.state == 0"
              @tap="attentionClick(item.appUserId, index, item.state)">回关</button>
              <button class="btn attention" v-if="item.state == 1">互相关注</button>
            <!-- <button class="btn attention" v-if="item.state == 1"
              @tap="attentionClick(item.appFollowId, index, item.state)">互相关注</button> -->
          </view>
          <view v-if="type == 'focus'">
            <button class="btn btn-has" v-if="item.state == 0"
              @tap="attentionClick(item.appFollowId, index, item.state)">取消关注</button>
            <button class="btn" v-if="item.state == 1"
              @tap="attentionClick(item.appFollowId, index, item.state)">取消互关</button>
          </view>
        </view>
        <view class="intro">
          <!-- <view class="icon">
                        <image src="@/static/images/shop-2.png" />
                    </view> -->
          <text>个性签名：{{ item.personalProfile }}</text>
        </view>
      </view>
    </view>
    <uv-line></uv-line>
  </view>
</template>

<style scoped lang="scss">
.card {
  display: flex;
  padding: 25rpx;

  .avatar {
    image {
      margin-right: 30rpx;
      border-radius: 50rpx;
    }
  }

  image {
    width: 124rpx;
    height: 124rpx;
  }

  .info {
    width: 100%;
    display: flex;
    flex-direction: column;

    justify-content: space-around;

    .info-top {
      display: flex;
      justify-content: space-between;
      width: 100%;

      .btn {
        display: flex;
        font-size: 24rpx;
        width: 120rpx;
        height: 48rpx;
        color: #ffffff;
        background-color: #FE371B;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 6rpx;
      }

      .attention {
        background-color: rgba(255, 255, 255, 1);
        color: rgba(146, 146, 175, 1);
        border: 2rpx solid rgba(146, 146, 175, 1);
        border-radius: 10rpx;
      }

      .btn-has {
        background: #ffffff;
        color: #9292AF;
        border: 2rpx solid #9292AF;
      }

    }

    .intro {
      display: flex;

      .icon {
        image {
          width: 50rpx;
          height: 50rpx;
        }
      }

    }
  }


}
</style>
